<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="keyword" content="Quick Doc Service">
    <title th:text="${title}"></title>

    <!-- Icons -->
    <link rel="stylesheet" type="text/css" href="../css/fontawesome-all.min.css"/>
    <link rel="stylesheet" type="text/css" href="../css/simple-line-icons.css"/>
    <!--layui and necessary plugins-->
    <link rel="stylesheet" type="text/css" href="../lib/layui/css/layui.css" media="all"/>
    <!-- Main styles for this application -->
    <link rel="stylesheet" type="text/css" href="../css/style.min.css"/>
    <link rel="stylesheet" type="text/css" href="../css/mxleader-style.css"/>
</head>

<body>

<div class="card">
    <form id="auth-form">
        <table class="table">
            <tr>
                <td align="right">类型:</td>
                <td>
                    <select id="type" name="type"
                            class="select custom-select">
                        <option th:each="entry : ${authTypeMap}"
                                th:value="${entry.key}"
                                th:text="${entry.value}">类型
                        </option>
                    </select>
                </td>

                <td align="right" rowspan="2">权限:</td>
                <td rowspan="2">
                    <select id="actions" name="actions" multiple="multiple" size="3"
                            class="select custom-select">
                        <option th:each="entry : ${authActionMap}"
                                th:value="${entry.key}"
                                th:text="${entry.value}">权限
                        </option>
                    </select>
                </td>
                <td rowspan="2">
                    <div class="layui-btn-group">
                        <button type="button" id="addBtn" class="layui-btn layui-btn-sm">
                            <i class="fas fa-plus-square" title="增加"></i>
                        </button>
                        <button type="button" id="removeBtn"
                                class="layui-btn layui-btn-danger layui-btn-sm">
                            <i class="fas fa-minus-square" title="删除"></i>
                        </button>
                    </div>
                </td>
            </tr>
            <tr>
                <td align="right">名称:</td>
                <td>
                    <div class="template-input-icon-container">
                        <i class="fas fa-address-card"></i>
                        <input type="text" class="form-control"
                               placeholder="名称"
                               required="required"
                               id="name" name="name"/>
                    </div>
                </td>
            </tr>
        </table>
    </form>
</div>

<table class="layui-table" id="auth" lay-filter="authTable">
</table>

<!-- Bootstrap and necessary plugins -->
<script src="../js/jquery.min.js"></script>
<script src="../js/popper.min.js"></script>
<script src="../js/bootstrap.min.js"></script>
<script src="../js/pace.min.js"></script>
<script src="../lib/layui/layui.js" charset="utf-8"></script>

<script type="text/html" id="opsBar">
    <button class="layui-btn layui-btn-danger layui-btn-sm" lay-event="del-auth">
        <i class="fas fa-trash-alt" title="删除"></i>
    </button>
</script>
<script th:inline="javascript">
    /*<![CDATA[*/
    $.fn.serializeObject = function () {
        var o = {};
        var a = this.serializeArray();
        $.each(a, function () {
            if (o[this.name]) {
                if (!o[this.name].push) {
                    o[this.name] = [o[this.name]];
                }
                o[this.name].push(this.value || '');
            } else {
                if (this.name === 'actions') {
                    o[this.name] = [this.value];
                } else {
                    o[this.name] = this.value || '';
                }
            }
        });
        return o;
    };

    layui.use('table', function () {
        var table = layui.table;
        var type = [[${type}]];
        var dataUrl = null;
        var authUrl = null;
        var removeAuthUrl = null;

        switch (type) {
            case 'DISK': {
                dataUrl = '/api/disk/auth';
                authUrl = '/api/disk/addAuth?';
                removeAuthUrl = '/api/disk/removeAuth?';
            }
                break;
            case 'FOLDER': {
                dataUrl = '/api/folder/auth';
                authUrl = '/api/folder/addAuth?';
                removeAuthUrl = '/api/folder/removeAuth?';
            }
                break;
        }

        var ops = {
            elem: '#auth',
            url: dataUrl,
            id: 'auth-data',
            where: {id: [[${parentId}]]},
            cols: [
                [
                    {field: 'type', width: 100, title: '类型', sort: true, event: 'chosen-auth', templet: '#typeTpl'},
                    {field: 'name', align: 'center', title: '名称', event: 'chosen-auth'},
                    {field: 'actions', align: 'center', width: 160, title: '权限', event: 'chosen-auth'},
                    {align: 'center', width: 80, title: '操作', toolbar: '#opsBar'}
                ]
            ]
        };

        table.render(ops);

        //监听工具条
        table.on('tool(authTable)', function (obj) {
            var data = obj.data;
            switch (obj.event) {
                case 'del-auth': {
                    authService(removeAuthUrl, data);
                }
                    break;
                case 'chosen-auth': {
                    $('#name').val(data.name);
                    $('#type').val(data.type);
                }
                    break;
            }

        });

        $("#addBtn").click(function () {
            authService(authUrl, $('#auth-form').serializeObject());
        });

        $("#removeBtn").click(function () {
            authService(removeAuthUrl, $('#auth-form').serializeObject());
        });

        function authService(_authUrl, _postData) {
            $.ajax({
                type: 'POST',
                url: _authUrl + 'parentId=' + [[${parentId}]],
                contentType: 'application/json; charset=utf-8',
                async: false,
                data: JSON.stringify(_postData),
                dataType: 'json',
                error: function (request) {
                    alert('Connection error');
                },
                success: function (data) {
                    table.reload('auth-data', {
                        url: dataUrl,
                        where: {id: [[${parentId}]]}
                    });
                }
            });
        }
    });

    /*]]>*/
</script>
<script type="text/html" id="typeTpl">
    {{#  if(d.type === 'GROUP'){ }}
    <span style="color: #2f5ef5;">用户组</span>
    {{#  } else { }}
    <span style="color: #00ff00;">用户</span>
    {{#  } }}
</script>
</body>
</html>